(function () {
    document.onreadystatechange = completeLoading;
    // 加载状态为complete时移除loading效果
    function completeLoading() {
        if (document.readyState == "complete") {
            setTimeout(function () {
                window.anime({
                    targets: '#loading',
                    translateY: [
                        { value: '-100%', duration: 500 },
                    ],
                    borderRadius: [
                        { value: '50%', duration: 500 },
                    ],
                    easing: 'easeInOutQuad'
                });
               homeLine('up')
            }, 1000)
        }
    }

    function homeLine(type) {
        if (type === 'down') {
            window.anime({
                targets: '#website .section .header',
                translateY: [{ value: '-100%', duration: 100},],
                opacity: [{ value: 0, duration: 100},],
                easing: 'easeInOutQuad'
            });
            window.anime({
                targets: '#website .section .watermark p',
                translateY: [0, 70],
                scale: [1, 0],
                opacity: [1, 0],
                duration: 300,
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '#website .section .watermark button',
                scale: [1, 0],
                opacity: [1, 0],
                duration: 300,
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '#website .section .watermark div',
                translateX: [0, 70],
                opacity: [1, 0],
                duration: 500,
                easing: 'spring(1, 80, 10, 0)',
            });
        } else {
            window.anime({
                targets: '#website .section .header',
                translateY: [{ value: '-100%', duration: 0 }, { value: 0, duration: 500 },],
                opacity: [{ value: 0, duration: 0 }, { value: 1, duration: 500 },],
                easing: 'easeInOutQuad'
            });
            window.anime({
                targets: '#website .section .watermark p',
                duration: 1000,
                translateY: [70, 0],
                scale: [0, 1],
                opacity: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '#website .section .watermark button',
                duration: 1000,
                translateY: [70, 0],
                scale: [0, 1],
                opacity: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '#website .section .watermark div',
                duration: 1000,
                translateX: [70, 0],
                opacity: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
        }
    }
    function scenarioLine(type) {
        if (type === 'down') {
            // 标题
            window.anime({
                targets: '.scenario .section-title',
                duration: 500,
                translateX: [0, 70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.scenario-content-row-item',
                duration: 500,
                translateY: [0, 170],
                opacity: [1, 0],
                scale: [1, .8],
                easing: 'spring(1, 80, 10, 0)',
            });
        }else {
            // 标题
            window.anime({
                targets: '.scenario .section-title',
                duration: 500,
                translateX: [70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.scenario-content-row-item',
                duration: 500,
                translateY: [170, 0],
                opacity: [0, 1],
                scale: [.8, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
        }
    }
    function productLine(type) {
        if (type === 'down') {
            // 标题
            window.anime({
                targets: '.product .section-title',
                duration: 500,
                translateX: [0, 70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-app',
                duration: 500,
                translateX: [0, 70],
                opacity: [1, 0],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-round',
                duration: 500,
                scale: [1, 0],
                translateX: [0, 100],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-right p',
                duration: 300,
                translateX: [0, 100],
                opacity:[1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-right button',
                duration: 500,
                opacity:[1, 0],
                scale: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-right img',
                duration: 300,
                translateX: [0, 100],
                translateY: [0, 100],
                scale: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
        }else {
            // 标题
            window.anime({
                targets: '.product .section-title',
                duration: 500,
                translateX: [70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-app',
                duration: 500,
                translateX: [70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-round',
                duration: 500,
                scale: [0, 1],
                translateX: [100, 0],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-right p',
                duration: 300,
                translateX: [100, 0],
                opacity:[0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(300) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '.product .product-content-right button',
                duration: 500,
                opacity:[0, 1],
                scale: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.product .product-content-right img',
                duration: 300,
                translateX: [100, 0],
                translateY: [100, 0],
                scale: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(300) // 每个元素的延迟增加100毫秒。
            });
        }
    }
    function courseLine(type) {
        if (type === 'down') {
            // 标题
            window.anime({
                targets: '.course .section-title',
                duration: 500,
                translateX: [0, 70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-title',
                duration: 500,
                translateY: [0, -70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-map',
                duration: 500,
                opacity: [1, 0],
                easing: 'easeOutElastic(1, .8)',
            });
            window.anime({
                targets: '.course .course-content-dot',
                duration: 500,
                opacity: [1, 0],
                translateY: [0, -70],
                easing: 'easeOutElastic(1, .8)',
            });
        }else {
            // 标题
            window.anime({
                targets: '.course .section-title',
                duration: 500,
                translateX: [70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-title',
                duration: 500,
                translateY: [-70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-map',
                duration: 700,
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-dot',
                duration: 700,
                opacity: [0, 1],
                delay: 700,
                translateY: [-70, 0],
                scale: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.course .course-content-dot path',
                strokeDashoffset: [window.anime.setDashoffset, 0],
                easing: 'easeInOutSine',
                duration: 1500,
                delay: 700,
            });
        }
    }
    function throughLine(type) {
        if(type === 'down') {
            window.anime({
                targets: '.through .section-title',
                duration: 500,
                translateX: [0, 70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.through .through-table',
                duration: 300,
                translateY: [0, -70],
                opacity: [1, 0],
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.through .footer',
                duration: 300,
                translateY: [0, -200],
                easing: 'spring(1, 80, 10, 0)',
            });
        }else {
            window.anime({
                targets: '.through .section-title',
                duration: 500,
                translateX: [70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: '.through .through-table',
                duration: 300,
                translateY: [-70, 0],
                opacity: [0, 1],
                delay: 300,
                easing: 'spring(1, 80, 10, 0)',
            });
            window.anime({
                targets: ['.through .through-table-th', '.through .through-table-td'],
                duration: 500,
                translateY: [-70, 0],
                opacity: [0, 1],
                easing: 'spring(1, 80, 10, 0)',
                delay: anime.stagger(200) // 每个元素的延迟增加100毫秒。
            });
            window.anime({
                targets: '.through .footer',
                duration: 500,
                translateY: ['-100%', 0],
                delay: 700,
                easing: 'spring(1, 80, 10, 0)',
            });
        }
    }
    const  vm = new Vue({
        el: '#website',
        data: {
            language: 'ZH',
            fullPage: null,
        },
        computed: {
            internationalization() {
                return language[this.language]
            }
        },
        created() {},
        mounted() {
            this.fullPage = new fullpage('#website', {
                resize: true,
                onLeave: this.onLeave,
                scrollingSpeed: 1000,
                scrollOverflow:true,//内容超过一屏幕显示滚动条
                sectionsColor:['transparent', '#171919', '#171919', '#171919', '#171919', '#171919']
            });
        },
        methods: {
            homeLine,
            scenarioLine,
            productLine,
            courseLine,
            throughLine,
            onLeave({index}, {index:nextIndex}) {
                if (index === 0 || nextIndex === 0) {
                    this.homeLine(index === 0 ? 'down' : '')
                }
                if (index === 1 || nextIndex === 1) {
                    this.scenarioLine(index === 1 ? 'down' : '')
                }
                if (index === 2 || nextIndex === 2) {
                    this.productLine(index === 2 ? 'down' : '')
                }
                if (index === 4 || nextIndex === 4) {
                    this.courseLine(index === 4 ? 'down' : '')
                }
                if (index === 5 || nextIndex === 5) {
                    this.throughLine(index === 5 ? 'down' : '')
                }
            },
            // 切换语言
            switchLanguage(type) {
                if (this.language === type) {
                    return;
                }
                this.language = type;
                let spanWidth = document.getElementsByClassName('header-en-active')[0].offsetWidth;
                var boo = type === 'ZH' ? 0 : spanWidth + 10;
                let rotate = type === 'ZH' ? -225 : -45;
                let animeOption = {
                    targets: '.header .header-en .header-en-active',
                    translateX: [
                        { value: boo, duration: 500 },
                    ],
                    scaleY: [
                        {value: 1, duration: 0},
                        {value: .8, duration: 300},
                        {value: 1, duration: 300},
                    ],
                    rotate: [
                        {value: rotate, duration: 0}
                    ],
                    borderBottomRightRadius: [
                        {value: '50%', duration: 0},
                        {value: '20%', duration: 300},
                        {value: '50%', duration: 300},
                    ],
                    easing: 'easeInOutQuad'
                }
                window.anime(animeOption);
            }
        }
    })

})(window, document)